import { Calendar, TrendingUp, Users, Eye, MousePointer, BarChart3, Globe, Activity } from 'lucide-react';
import { truncateUserId } from '@/lib/utils';

interface AnalyticsPageProps {
  params: { userId: string };
}

// 获取Analytics数据的函数
async function getAnalyticsData(userId: string) {
  // 模拟Analytics数据
  return {
    user: {
      name: truncateUserId(userId),
    },
    overview: {
      allUser: 10234,
      eventCount: 536,
      conversations: 21,
      newUser: 3321
    },
    users: {
      total: 63,
      growth: 12.5,
      perMinutes: "In Last 30 Minutes"
    },
    topCountries: [
      { name: 'Bangladesh', users: 5 },
      { name: 'India', users: 6 },
      { name: 'Pakistan', users: 6 },
      { name: 'Australia', users: 10 },
      { name: 'America', users: 8 }
    ],
    sessions: 1247,
    pageViews: 2156,
    chartData: [
      { month: 'Feb', value: 70 },
      { month: 'Mar', value: 85 },
      { month: 'Apr', value: 60 },
      { month: 'May', value: 80 },
    ]
  };
}

export default async function AnalyticsPage({ params: { userId } }: AnalyticsPageProps) {
  const analyticsData = await getAnalyticsData(userId);

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Analytics dashboard</h1>
          <p className="text-muted-foreground">Track your website performance and user engagement</p>
        </div>
        <button className="flex items-center space-x-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
          <Calendar className="h-4 w-4" />
          <span className="text-sm">Pick a date</span>
        </button>
      </div>

      {/* Reports Snapshot Section */}
      <div className="bg-card rounded-xl p-6 border shadow-sm">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-xl font-semibold text-foreground">Reports Snapshot</h2>
            <p className="text-muted-foreground text-sm">Demographic properties of your customer</p>
          </div>
          <button className="flex items-center space-x-2 px-4 py-2 border border-input rounded-lg hover:bg-accent transition-colors">
            <span className="text-sm">Select Date</span>
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          {/* All User Card */}
          <div className="bg-primary rounded-xl p-6 text-primary-foreground shadow-lg">
            <h3 className="text-sm font-medium opacity-90 mb-2">All User</h3>
            <p className="text-3xl font-bold mb-1">{analyticsData.overview.allUser.toLocaleString()}</p>
          </div>

          {/* Event Count Card */}
          <div className="bg-gradient-to-br from-orange-400 to-orange-500 rounded-xl p-6 text-white">
            <h3 className="text-sm font-medium opacity-90 mb-2">Event Count</h3>
            <p className="text-3xl font-bold mb-1">{analyticsData.overview.eventCount}</p>
          </div>

          {/* Conversations Card */}
          <div className="bg-gradient-to-br from-green-400 to-green-500 rounded-xl p-6 text-white">
            <h3 className="text-sm font-medium opacity-90 mb-2">Conversations</h3>
            <p className="text-3xl font-bold mb-1">{analyticsData.overview.conversations}</p>
          </div>

          {/* New User Card */}
          <div className="bg-gradient-to-br from-cyan-400 to-cyan-500 rounded-xl p-6 text-white">
            <h3 className="text-sm font-medium opacity-90 mb-2">New User</h3>
            <p className="text-3xl font-bold mb-1">{analyticsData.overview.newUser.toLocaleString()}</p>
          </div>
        </div>

        {/* Chart Area */}
        <div className="bg-muted/20 rounded-xl p-6 h-64 flex items-center justify-center">
          <div className="text-center">
            <BarChart3 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <p className="text-muted-foreground">Analytics chart visualization</p>
            <p className="text-sm text-muted-foreground mt-2">Monthly user engagement trends</p>
          </div>
        </div>
      </div>

      {/* Secondary Stats Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Users Card */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-foreground">Users</h3>
            <span className="text-2xl font-bold text-primary">{analyticsData.users.total}</span>
          </div>
          <p className="text-sm text-muted-foreground mb-4">{analyticsData.users.perMinutes}</p>
          <p className="text-sm text-muted-foreground">User Per Minutes</p>
          
          {/* Simple chart representation */}
          <div className="mt-4 h-20 bg-muted/20 rounded-lg flex items-end justify-center space-x-1 p-2">
            {[40, 60, 30, 70, 50, 80, 90, 85].map((height, index) => (
              <div
                key={index}
                className="bg-primary rounded-sm"
                style={{ height: `${height}%`, width: '8px' }}
              />
            ))}
          </div>
        </div>

        {/* Top Countries */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <h3 className="text-lg font-semibold text-foreground mb-4">Top Countries</h3>
          <div className="space-y-3">
            {analyticsData.topCountries.map((country, index) => (
              <div key={country.name} className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="w-2 h-2 bg-primary rounded-full"></div>
                  <span className="text-sm text-foreground">{country.name}</span>
                </div>
                <span className="text-sm font-medium text-foreground">
                  {country.users.toString().padStart(2, '0')}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Additional Stats */}
        <div className="space-y-4">
          {/* Sessions Card */}
          <div className="bg-card rounded-xl p-4 border shadow-sm">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="text-sm font-medium text-muted-foreground">Sessions</h4>
                <p className="text-2xl font-bold text-foreground">{analyticsData.sessions.toLocaleString()}</p>
              </div>
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <Activity className="h-6 w-6 text-blue-600" />
              </div>
            </div>
          </div>

          {/* Page Views Card */}
          <div className="bg-card rounded-xl p-4 border shadow-sm">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="text-sm font-medium text-muted-foreground">Page Views</h4>
                <p className="text-2xl font-bold text-foreground">{analyticsData.pageViews.toLocaleString()}</p>
              </div>
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <Eye className="h-6 w-6 text-green-600" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Section */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Device Breakdown */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <h3 className="text-lg font-semibold text-foreground mb-4">Device Breakdown</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                  <Globe className="h-5 w-5 text-purple-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">Desktop</p>
                  <p className="text-xs text-muted-foreground">65.2%</p>
                </div>
              </div>
              <span className="text-sm font-semibold text-foreground">6,520</span>
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                  <MousePointer className="h-5 w-5 text-orange-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">Mobile</p>
                  <p className="text-xs text-muted-foreground">28.5%</p>
                </div>
              </div>
              <span className="text-sm font-semibold text-foreground">2,850</span>
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                  <Activity className="h-5 w-5 text-green-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">Tablet</p>
                  <p className="text-xs text-muted-foreground">6.3%</p>
                </div>
              </div>
              <span className="text-sm font-semibold text-foreground">630</span>
            </div>
          </div>
        </div>

        {/* Real-time Activity */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-foreground">Real-time Activity</h3>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span className="text-xs text-muted-foreground">Live</span>
            </div>
          </div>
          
          <div className="space-y-3">
            <div className="flex items-center justify-between py-2">
              <span className="text-sm text-foreground">Active Users</span>
              <span className="text-sm font-semibold text-green-600">247</span>
            </div>
            <div className="flex items-center justify-between py-2">
              <span className="text-sm text-foreground">Page Views (Last hour)</span>
              <span className="text-sm font-semibold text-foreground">1,429</span>
            </div>
            <div className="flex items-center justify-between py-2">
              <span className="text-sm text-foreground">Bounce Rate</span>
              <span className="text-sm font-semibold text-orange-600">42.3%</span>
            </div>
            <div className="flex items-center justify-between py-2">
              <span className="text-sm text-foreground">Avg. Session Duration</span>
              <span className="text-sm font-semibold text-foreground">3m 42s</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 